<template>
  <view class="search-page">
    <myInput v-model="searchTxt" @search="handleSearch" />

    <view class="s-title">
      <text>搜索到 {{ caseList.length }} 条记录</text>
    </view>

    <view class="case-more">
      <view
        class="case-box"
        v-for="(item, index) in caseList"
        :key="index"
        @tap="goDetail(item)"
      >
        <image class="case-img" :src="item.image" mode="aspectFill"></image>
        <!-- <text class="acct">{{ item.account_type }}券</text> -->
        <view class="p-title">{{ item.name }}</view>
        <view class="p-price">￥{{ item.price }}</view>
        <view class="p-num">销量：{{ 241212 }}</view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import BasicLayout from "@/layouts/basic-layout.vue";
import { onMounted, ref } from "vue";
import bar from "@/assets/imgs/bar.png";
// const pic = "https://cdn.tjkximg.com/content/zhangtang/images/mtjx.jpg";
import Taro from "@tarojs/taro";
import { Search2 } from "@nutui/icons-vue-taro";
import myInput from "@/components/my-input/index.vue";
import http from "@/utils/http";

const params = Taro.getCurrentInstance().router?.params;
const searchTxt = ref(params.keyword || "");

const pic = "https://cdn.tjkximg.com/content/zhangtang/images/mtjx.jpg";

Taro.setNavigationBarTitle({
  title: "搜索",
});

const pics = ref([]);

const upper = (e) => {
  console.log("upper:", e);
};

const lower = (e) => {
  console.log("lower:", e);
};

const onMoreView = () => {
  Taro.navigateTo({
    url: "/pages/test/test",
  });
};

Taro.usePullDownRefresh(() => {
  flash();
  setTimeout(() => {
    Taro.stopPullDownRefresh();
  }, 1000);
});

function flash() {
  http
    .postQuery(`/api/mallIndex/selectGoods`, {
      name: searchTxt.value,
    })
    .then((res) => {
      console.log("res 推荐的商品", res);
      caseList.value = res.data.map((i) => i.columns);
      caseList.value.forEach((item) => {
        item.image = item.imgsUrl.split(",").pop();
      });
    });
}

onMounted(() => {
  flash();
});

// 进度条数据
const progressList = ref([
  { name: "质量保证", imgUrl: pic, id: 1 },
  { name: "现场评估", imgUrl: pic, id: 2 },
  { name: "明码标价", imgUrl: pic, id: 3 },
  { name: "售后保障", imgUrl: pic, id: 4 },
]);

// 案例展示数据
const caseList = ref([]);

// 功能点击处理
const handleFeatureClick = (item: any) => {
  console.log("点击功能：", item.title);
  Taro.navigateTo({
    url: `/pages-detail/cate/list-view?id=${item.id}`,
  });
};

const handleSearch = (value: string | number) => {
  console.log("搜索值：", value);
  // 执行搜索逻辑
  //   Taro.navigateTo({
  //     url: `/pages-detail/shop/search?keyword=${value}`,
  //   });
  flash();
};

const goDetail = (item) => {
  Taro.navigateTo({
    url: "/pages-detail/detail/index?id=" + item.id,
  });
};

const onTest = () => {
  Taro.navigateTo({
    url: "/pages-detail/addr/index",
  });
};
</script>

<style lang="scss">
.search-page {
  padding-bottom: 40rpx;
  background: #f0f0f0;
  .s-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 30rpx 20rpx;
    text {
      font-size: 30rpx;
      color: #333;
    }
  }

  .case-more {
    display: grid;
    width: 720rpx;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin: 0 auto 30rpx;

    .case-box {
      background: #fff;
      display: flex;
      flex-direction: column;
      width: 350rpx;
      border-radius: 8rpx;
      position: relative;
      .case-img {
        width: 350rpx;
        height: 400rpx;
        border-radius: 8rpx;
        background: #eee;
      }

      .p-title {
        font-size: 30rpx;
        color: #333;
        margin-top: 4rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        box-sizing: border-box;
        padding: 8rpx 16rpx 2rpx;
      }

      .p-price {
        font-size: 30rpx;
        color: #ffaa00;
        margin-top: 4rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        box-sizing: border-box;
        // padding: 4rpx;
        padding: 8rpx 16rpx;
      }
      .p-num {
        font-size: 24rpx;
        color: #8e8e8e;
        margin-top: 4rpx;
        padding: 2rpx 16rpx 10rpx;
      }
    }
  }
}
</style>
